<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        账号：
        <input type="text" placeholder="请输入账号" id="account">
        <button onclick="save()">保存</button>
        <button onclick="get()">获取账号</button>
    </div>

    <div>
        <p id="eat">你已经吃了0碗饭！！！！</p>
        <button onclick="ganfan()">我能去你家吃一碗饭吗？</button>
    </div>
    <script>
        function save(){
            // 1.获取输入框的值
            var obj = document.getElementById("account");
            var account = obj.value;
            alert(account);
            // 2.将数据保存到 localStorage
            if(typeof(Storage) !== "undefined"){// 判断Storage是否可用
                // localStorage 特点：没有过期时间（without any expiration date）,
                // 关闭浏览器之后数据仍然可用（data not deleted after the browser is closed）
                // 键值对 key / value
                localStorage.account = account;
                alert("保存成功");
            }
        }

        function get(){
            if(typeof(Storage) !== "undefined"){// 判断Storage是否可用
                var account = localStorage.account;
                alert(account);
            }
        }


        function ganfan(){
            if(typeof(Storage) !== "undefined"){// 判断Storage是否可用
                 // sessionStorage 特点：关掉浏览器之后，数据不可用(data is deleted once the user closes the browser)
                if(sessionStorage.count){                 
                    sessionStorage.count++;
                }else{
                    sessionStorage.count = 1;
                }
            }
            document.getElementById("eat").innerHTML = "你已经吃了"+sessionStorage.count+"碗饭！！！！";

        }
    </script>
</body>
</html>